<template>
  <div class="bh-mb-16" style="padding: 20px 0px" ref="formOnly">
    <div>
      <FormContent
        ref="formContextParent"
        :flowOpts="flowOpts"
        :formOpts="formOpts"
        :otherOpts="otherOpts"
        :options="options"
        :formUrl="formUrl"
        :flowInfo="flowInfo"
        @on-change="formChange"
      />
    </div>
    <div style="margin-top:50px">
      <FormFooter
        ref="formFooterParent"
        :flowOpts="flowOpts"
        :formOpts="formOpts"
        :otherOpts="otherOpts"
        :formUrl="formUrl"
        :itemData="itemData"
        :formContentRef="formContentRef"
      >
      </FormFooter>
    </div>
    <SecondCheck ref="secondCheck" @on-confirm="confirmCheck"></SecondCheck>
  </div>
</template>

<script>
import { divideUrlAndQuery, getMenuInfo } from 'utils'
import { request } from 'utils/http'
import FormContent from 'components/form-content'
import FormFooter from 'components/form-footer'
import SecondCheck from 'components/second-check'

export default {
  props: {
    
  },
  data () {
    return {
      flowOpts: {},
      formOpts: {},
      otherOpts: {},
      submitURL: window.submitURL,
      formUrl: null,
      itemData: {},
      options: null,
      formContentRef: null,
      formFooterRef: null,
      flowInfo: {},
    }
  },
  computed: {

  },
  methods: {
    getConRef(){
      this.formContentRef = this.$refs.formContextParent
      this.formFooterRef = this.$refs.formFooterParent
    },
    init(verifyCode){
      const _this = this
      _this.getConRef()
      let url = window.formUrl
      let params = {}
      let menuInfo = {} 
      if(!url){
        const menuName = this.$route.params.name
        if (!menuName) {
          return
        }
        menuInfo = getMenuInfo(menuName)
      }else{
        menuInfo = divideUrlAndQuery(url)
      }
      if (!menuInfo) {
        return
      }else{
        // url = 'emap/'+menuInfo.url   //(process.env.NODE_ENV === "development" || Vue.config.devtools)
        url = menuInfo.url
        this.formUrl = url
        params = menuInfo.params
        if(verifyCode){
          params['verifyCode'] = verifyCode
        }
      }

      request(url, {
        query: params,
        noContext: true,
      }).then(res => {
        if(res.code === "0") {
          //二次验证
          if(res.datas && res.datas.result === undefined){
            _this.secondCheck()
            return
          }

          _this.flowOpts = res.datas
          res.models.runjs = JSON.parse(res.models.runjs)
          _this.formOpts = res.models
          _this.options = {readonly: res.models.formReadOnly}
          let flowConfig = res.datas && res.datas.flowConfig || {}
          flowConfig.appName = flowConfig.defKey && flowConfig.defKey.split('.')[0]
          flowConfig.language = 'zh'
          _this.flowInfo = flowConfig

          let runjs = res.models.runjs
          res.models.runjs = runjs
          //下一步处理人数据处理
          const needFlowOpt = res.datas && res.datas.needFlowOpt
          const formReadOnly = res.models.formReadOnly

          if (needFlowOpt) {
            if (flowConfig.needSelectAssignees && !formReadOnly) {
              let nextNode = {"type":"flow-next-step","name":"下一步处理人","icon":"icon-subtitles","options":{},"key":"emap-flow-next-step_1576726377000_87961"}
              runjs.children.push(nextNode)
            }
          } else { // needFlowOpt 不为 true 时，不需要展示下列控件
            const controls = runjs.children
            for (let i = controls.length - 1; i >= 0; i--) {
              if (['audit-comment'].includes(controls[i].type)) {
                controls.splice(i, 1)
              }
            }
          }

          var obj = {
            form: res.models.formAlias,
            isformMenu: true
          }
          Object.assign(_this.itemData, obj)
          //填充数据
          if(this.formContentRef){
            this.$nextTick(() => {
              this.formContentRef.$refs.form.setValue(res.datas.result)
            })
          }
        }
      })
    },
    secondCheck() {
      const _this = this
      this.$refs.secondCheck.checkModal = true
      // this.$refs.secondCheck.formOnly = true
    },
    confirmCheck(value) {
      const verifyCode = value.verifyCode
      this.init(verifyCode)
    },
    formChange(){
      //...
    }
  },
  mounted() {
    this.init()
  },
  components: {
    /* eslint-disable-next-line */
    FormContent,
    /* eslint-disable-next-line */
    // FormNextStep,
    /* eslint-disable-next-line */
    FormFooter,
    // BhButton
    SecondCheck,
  }
}
</script>
